<template>
  <div class="box1">
    <!-- 概况start -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="height: 170px">
          <div class="box_text">
            财务概况
            <span class="box_text2">更新时间：2035年6月19日 12:35:59</span>
          </div>
          <el-row>
            <!-- 账户余额 -->
            <div
              class="box_1"
              style="background-color: #5dcce5; border-radius: 10px"
            >
              <div class="text_1">
                <span class="text_2_span">账户余额</span>
                <span class="text_1_color"
                  ><span class="text_1_span">765,400.00</span></span
                ><br />
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-jinbi"
                  style="font-size: 50px; color: #95deee"
                ></i>
              </div>
            </div>
            <!-- 应收账款 -->
            <div
              class="box_1"
              style="background-color: #92dd8b; border-radius: 10px"
            >
              <div class="text_1">
                <span class="text_2_span">应收账款</span>
                <span class="text_1_color"
                  ><span class="text_1_span">76.54</span></span
                ><br />
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-dingdan"
                  style="font-size: 50px; color: #cff0cc"
                ></i>
              </div>
            </div>
            <!-- 应付账款 -->
            <div
              class="box_1"
              style="background-color: #1890ff; border-radius: 10px"
            >
              <div class="text_1">
                <span class="text_2_span">应收账款</span>
                <span class="text_1_color"
                  ><span class="text_1_span">76.54</span></span
                ><br />
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-lirun2"
                  style="font-size: 50px; color: #9aceff"
                ></i>
              </div>
            </div>
            <!-- 今日收入 -->
            <div
              class="box_1"
              style="background-color: #ff8e8e; border-radius: 10px"
            >
              <div class="text_1">
                <span class="text_2_span">今日收入</span>
                <span class="text_1_color"
                  ><span class="text_1_span">76.54</span></span
                ><br />
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-chezaikucun"
                  style="font-size: 40px; color: #ffcdcd"
                ></i>
              </div>
            </div>
            <!-- 今日支出 -->
            <div
              class="box_1"
              style="background-color: #ffcd64; border-radius: 10px"
            >
              <div class="text_1">
                <span class="text_2_span">今日支出</span>
                <span class="text_1_color"
                  ><span class="text_1_span">76.54</span></span
                ><br />
              </div>
              <div class="box_1_img">
                <i
                  class="iconfont icon-userplus-fill"
                  style="font-size: 45px; color: #ffe9bb"
                ></i>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 概况end -->
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 代办事项start -->
        <div class="grid-content bg-purple-dark" style="height: 150px">
          <div class="box_text">代办事项</div>
          <!-- 待审批 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-ruzhitixing" style="font-size: 40px"></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">待审批</span>
            </div>
          </div>
          <!-- 待支付 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-chezaikucun" style="font-size: 37px"></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">待支付</span>
            </div>
          </div>
          <!-- 代签收 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-daiqianshou" style="font-size: 40px"></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">代签收</span>
            </div>
          </div>
          <!-- 确认收款 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i
                class="iconfont icon-shiliangzhinengduixiang8"
                style="font-size: 40px"
              ></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">确认收款</span>
            </div>
          </div>
          <!-- 待开票 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-daikaipiao" style="font-size: 40px"></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">待开票</span>
            </div>
          </div>
        </div>
        <!-- 代办事项end -->
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <!-- 计划完成对比start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 300px">
          <div>&nbsp;</div>
          <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
        </div>
      </el-col>
      <!-- 计划完成对比end -->
      <!-- 新增销售start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 300px">
          <div>&nbsp;</div>
          <div id="myChart2" :style="{ width: '500px', height: '300px' }"></div>
        </div>
      </el-col>
      <!-- 新增销售end -->
    </el-row>
    <!-- 收支对比start -->
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="grid-content bg-purple-dark" style="height: 300px">
          <div>&nbsp;</div>
          <div
            id="myChart3"
            :style="{ width: '1000px', height: '300px' }"
          ></div>
        </div>
      </el-col>
    </el-row>
    <!-- 收支对比end -->
    <!-- 常用单据start -->
    <div class="dimission">
      <div class="box_text">常用单据</div>
      <!-- 记收入 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-dingdan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>记收入</span></div>
      </div>
      <!-- 记支出 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-wj-zcjl" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>记支出</span></div>
      </div>
      <!-- 收支统计 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-shouzhitongji" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>收支统计</span></div>
      </div>
      <!-- 付款单 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-fukuandanguanli" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>付款单</span></div>
      </div>
      <!-- 差旅报销单 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-feiyongbaoxiaodan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>差旅报销单</span></div>
      </div>
      <!-- 收款单 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-shoukuandan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>收款单</span></div>
      </div>
      <!-- 申请单 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-zhuanzhang" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>申请单</span></div>
      </div>
      <!-- 借款单 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-jiekuan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>借款单</span></div>
      </div>
      <!-- 全部单据 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-quanbu" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>全部单据</span></div>
      </div>
    </div>
    <!-- 常用单据end -->
    <!-- 公告start -->
    <div class="notice">
      <div class="box_text">
        公告<span style="float: right; font-size: 12px; margin-right: 20px"
          >查看更多 ></span
        >
      </div>
      <!-- 公告信息 绿标 -->
      <div class="notice_message">
        <div class="tag">
          <el-tag type="success" size="mini">信息</el-tag>
        </div>
        <div class="message">
          <span>系统新版本升级通知，新功能介绍</span>
        </div>
      </div>
      <!-- 公告信息 红标 -->
      <div class="notice_message">
        <div class="tag">
          <el-tag type="danger" size="mini">信息</el-tag>
        </div>
        <div class="message">
          <span>系统新版本升级通知，新功能介绍</span>
        </div>
      </div>
    </div>
    <!-- 公告end -->
  </div>
</template>

<script>
export default {
  name: "Financialworkbench",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.planChart();
    this.marketChart();
    this.incomeChart();
  },
  methods: {
    // 计划图表生成
    planChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        title: {
          text: "   计划完成对比",
        },
        legend: {
          data: ["回款计划", "回款核销"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "回款计划",
            data: [150, 230, 224, 218, 135, 147, 50],
            type: "line",
          },
          {
            name: "回款核销",
            data: [200, 20, 250, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //新增销售
    marketChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart2"));
      var option = {
        title: {
          text: "   新增销售",
        },
        legend: {
          data: ["销售金额"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "销售金额",
            data: [150, 230, 224, 218, 135, 147, 50],
            type: "line",
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 收支对比图表
    incomeChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart3"));
      var option = {
        title: {
          text: "            收支对比",
        },
        legend: {
          data: ["收入金额", "支出金额"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "收入金额",
            data: [150, 230, 224, 218, 135, 147, 50],
            type: "line",
          },
          {
            name: "支出金额",
            data: [200, 20, 250, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
/* element-ui样式 */
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
  border-radius: 10px;
}
/* 自定义样式 */
* {
  margin: 0px;
  padding: 0px;
}
.box1 {
  width: 98%;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}
.box_text {
  padding-top: 20px;
  padding-left: 40px;
  font-size: 14px;
}
.box_text2 {
  padding-left: 20px;
  font-size: 14px;
  color: #989daa;
}
.box_1 {
  width: 225px;
  height: 78px;
  margin-left: 18px;
  margin-top: 20px;
  float: left;
  /* padding-left: 40px; */
}
.text_1 {
  margin-top: 10px;
  margin-left: 20px;
  width: 85px;
  float: left;
  color: #fff;
}
.text_1_span {
  margin-top: 20px;
  font-size: 23px;
}
.text_2_span {
  font-size: 12px;
}
.box_1_img {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}
/* 待办事项 */
.backlog_class {
  width: 140px;
  height: 80px;
  float: left;
  margin-left: 40px;
  margin-top: 15px;
}
.backlog_img {
  width: 40px;
  height: 40px;
  float: left;
  margin-top: 20px;
}
.backlog_text {
  width: 73px;
  height: 50px;
  float: left;
  margin-top: 20px;
  text-align: center;
}
.backlog_text1 {
  color: #5b5e68;
  font-size: 20px;
}
.backlog_text2 {
  color: #989daa;
  font-size: 12px;
}
/* 公告 */
.notice {
  width: 300px;
  height: 268px;
  position: relative;
  left: 960px;
  top: -780px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.notice_message {
  float: left;
  width: 250px;
  height: 20px;
  margin-left: 30px;
  margin-top: 12px;
  border-radius: 5px;
  /* border: 1px solid red; */
}
.notice_message:hover {
  background-color: #b7b6b6;
}
.tag {
  float: left;
}
.message {
  float: left;
  margin-left: 20px;
  line-height: 22px;
  font-size: 12px;
}
/* 常用单据 */
.dimission {
  width: 300px;
  height: 298px;
  position: relative;
  left: 960px;
  top: -780px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.dimission_box {
  width: 80px;
  text-align: center;
  margin-left: 10px;
  margin-top: 20px;
  font-size: 12px;
  float: left;
}
</style>